<template>
  <div>
    <div class="puser puser2 vux-1px-b">
      <div class="usermsg">
        <img :src="dataItem.p_user_info.face" />
        <span>{{dataItem.p_user_info.nick_name}}</span>
      </div>
      <div>
        <a :href="'tel:' + dataItem.p_user_info.phone">
          <i class="icon icon-phone phone-icon"></i>
        </a>
      </div>
    </div>
    <group style="margin-top: 0.15rem;">
      <cell title="参考里程" value-align="left" :value="dataItem.mileage + '公里'"></cell>
      <cell title="货物详情" value-align="left">
        <div slot="value" class="overflowtext">
          {{dataItem.goods_list || '' }}{{dataItem.goods_info  || ''}}
          <span v-if="dataItem.weight > 0">{{dataItem.weight}}{{dataItem.unit || '吨'}}</span>
          <span v-if="dataItem.volume > 0">{{dataItem.volume}}方</span>
          <span v-if="dataItem.number > 0">{{dataItem.number}}件</span>
          {{ dataItem.package || '' }}
        </div>
      </cell>
      <cell title="已报价" class="fourzi" value-align="left" :value="dataItem.freight + '元'"></cell>
    </group>

    <div class="vux-x-input weui-cell weui-vcode" style="background: #fff; margin-top: 0.15rem">
      <div class="weui-cell__hd">
        <label class="weui-label" style="width: 1.5rem">信息费</label>
      </div>
      <div class="weui-cell__bd weui-cell__primary">
        <input class="weui-input" @input="keyMoney" placeholder="请输入信息费" v-model="money" />
      </div>
    </div>

    <p style="line-height: 1.4rem; font-weight: bold;" class="text-center text-orange">支付金额：{{ money || 0 }}元</p>


    <div style="margin-top: 0.2rem; padding: 0.2rem;">
      <x-button type="primary" :show-loading="loading" action-type="button" @click.native="submit">{{ btn }}</x-button>
    </div>
  </div>
</template>

<script>
import { globalKeyUp, isWechat, toPayWechat } from '../libs/fn'
import { Cell } from 'vux'
export default{
  components: {
    Cell
  },
  created() {
    this.dataItem = JSON.parse(this.$route.query.data)
  },
  data() {
    return {
      money: '',
      dataItem: {},
      btn: '支付',
      loading: false
    }
  },
  methods: {
    keyMoney(e) {
      this.money = globalKeyUp(e.target)

    },
    submit() {
      if(!this.money || this.money <= 0 || this.money == '.'){
        this.$vux.toast.text('请填写信息费', 'middle')
        return
      }
      this.loading = true
      this.btn='正在支付'
      const {num} = this.dataItem
      const {uid} =  this.$store.state.userInfo
      this.$vux.confirm.show({
        title: '<i class="icon icon-gantanhao"></i>',
        content: '系统将从您的余额中直接扣除' + this.money + '元',
        confirmText: '确认扣除',
        cancelText: '取消',
        onConfirm: () => {
          this.$http.post($config.host + '/api/Xinxifei/account', qs.stringify({
            uid,
            client: $config.client_type,
            device: $config.device_type,
            token: this.$store.state.userInfo.token,
            total_price: this.money,
            service_id: 8,
            num,
            money: this.money
          })).then((res) => {
            const {code, msg, data} = res.data
            if(code == '1') {
              this.$vux.toast.text('支付成功', 'middle')
              this.$router.go(-1)
            } else if (code == '3') {
              this.$vux.toast.text($config.loginErrMsg, 'middle')
              this.$router.push({path: '/logout'})
            } else if (code == '4') {
              this.$vux.confirm.show({
                title: '<i class="icon icon-gantanhao"></i>',
                content: '您的余额不足以支付！',
                confirmText: '去支付',
                cancelText: '取消',
                onConfirm: () => {
                  this.topay(data.tobepay)
                },
                onCancel: () => {
                  this.btn='重新支付'
                  this.loading = false
                }
              })
            } else {
              this.btn='重新支付'
              this.loading = false
              this.$vux.toast.text(msg, 'middle')
            }
          }).catch((err) => {
            this.btn='重新支付'
            this.loading = false
            this.$vux.toast.text($config.errMsg, 'middle')
          })
        },
        onCancel: () => {
          this.btn='重新支付'
          this.loading = false
        }
      })

    },
    topay(money) {
      if(isWechat()) {
        toPayWechat(parseFloat(money).toFixed(2), {
          uid: this.$store.state.userInfo.uid,
          token: this.$store.state.userInfo.token
        }, () => {
          setTimeout(() => {
            this.subOrder()
          }, 500)
        })
      }
    },
  }
}
</script>

<style scoped>

</style>
